<template>

  <div class="Navbar">
    <Navbar/>
  </div>
  <div class="post-list">
    <div class="cen">
      <div class="module-title">
        <div style="display: flex;justify-content: space-evenly;width: 300px">
          <h4>推荐</h4>


        </div>
        <div class="post-list-cats">
          <el-row type="flex" justify="end">
            <el-button type="text" target="_blank">
              <router-link :href="cosplay" to="/cosplay">更多</router-link>
            </el-button>
          </el-row>
        </div>
      </div>
      <el-row :gutter="40" class="comment-row">
        <el-col :span="isMobile ? 24 : 12" v-for="post in posts" :key="post.id" class="comment-col">
          <el-card class="cos-card" shadow="hover">
            <a :href="post.link" target="_blank">
              <div class="post-module-thumb">
                <div style="display: flex">
                  <span v-for="img in post.imageSrc" :key="img">

                  <el-image :src="img" class="post-thumb" fit="cover"/>
                </span>
                </div>

              </div>
              <div class="post-info">
                <h3>
                  <a :href="post.link">{{ post.title }}</a>
                </h3>
                <div class="post-list-meta-box">
                  <el-tag class="post-list-cat-item" type="info">日期：{{ post.category }}</el-tag>
                  <div class="meta-right">
                    <span class="meta-view">
                        <el-icon><Lollipop/></el-icon>
                      {{ post.views }}w
                    </span>
                    <span class="meta-like">
                        <el-icon><Promotion/></el-icon>

                    </span>
                  </div>
                </div>
              </div>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
  <div class="but">
    <footers/>
  </div>
</template>

<script>
import {Lollipop, Promotion} from "@element-plus/icons-vue";
import {cosplayStore} from "@/stores/cosplay.js";

export default {
  components: { Promotion, Lollipop },
  data() {
    return {
      cosplayStore: cosplayStore(),
      loading: false,  // 加载状态
      currentPage: 1,  // 当前页数
      isMobile: window.innerWidth <= 768,
      pagedata: {
        page: 1,
        page_size: 10
      },
    };
  },
  mounted() {
    this.cosplayStore.initialize();
    this.loadPosts();
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.handleResize);
    this.loadcosplay();

  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
  handleResize() {
    this.isMobile = window.innerWidth <= 768;
  },

  async loadPosts() {
       // 获取当前页面路径
    const currentPath = this.$route.path;
    if (currentPath !== '/cosplay') {
      return

    }
    console.log('当前页面路径:', currentPath);
    if (this.loading) return; // 如果已经在加载中，直接返回

    this.loading = true;

    // 在这里加载更多内容
    await this.loadMorePosts();

    // 暂停 10 秒
    setTimeout(() => {
      this.loading = false; // 加载结束标记
    }, 10000); // 10 秒
  },

  async loadMorePosts() {
    console.log('加载更多文章...');

    // 加载下一页数据
    this.pagedata.page += 1;
    await this.fotersdeta(this.pagedata);
  },

  async loadData() {
    await this.fotersdeta(this.pagedata);
    this.loadcosplay();
  },

  async fotersdeta() {
    try {
      const isSuccess = await this.cosplayStore.fetchUserInfo(this.pagedata);
      this.loadcosplay();
      console.log(isSuccess, 8);
    } catch (error) {
      console.error('Failed to fetch user info:', error);
    }
  },

  loadcosplay() {
    this.cosplayStore.loadpostsFromLocalStorage(); // 从本地缓存加载数据
  },

  handleScroll() {
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    // 当滚动到底部时加载更多内容
    if (scrollTop + windowHeight >= documentHeight - 30 && !this.loading) {
      console.log('触发加载更多内容');
      this.loadPosts();
    }
  },
},

  computed: {
    posts() {
      const posts = this.cosplayStore.cosplay;
      return posts.map(item => {
        return {
          imageSrc: item.imageSrc, // 获取前四条图片 URL
          title: item.title,
          link: "/detail/" + item.id,
          excerpt: item.Collection,
          likes: item.likes,
          comments: item.comments,
          views: item.views,
        };
      });
    },
  }
};

</script>

<style scoped>
@media (max-width: 600px) {
  .comment-row {
    margin: 0;
  }

  .comment-col {
    margin-bottom: 10px;
  }
}

@media (min-width: 1350px) {
  .but {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cos-card {
    backdrop-filter: blur(3px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 10px;
  }

  .icon-example {
    font-size: 24px; /* 修改图标的大小 */
    color: #409EFF; /* 修改图标的颜色 */
  }

  .meta-right {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .meta-like {
    display: flex;
    align-items: center;
  }

  .meta-view {
    display: flex;
    align-items: center;

  }

  .post-list {
    margin-top: 80px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .module-title h4 {
    margin: 15px 0;
  }

  .module-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cos-card {
    height: 360px;
    margin-bottom: 20px;
    width: 100%;
  }

  .el-image {
    margin: 0 5px;
  }

  .post-thumb {
    width: 200px;
    height: 260px;
    border-radius: 4px;
  }

  .post-pay-type {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .post-info {
    padding: 15px;
  }

  .post-info h3 {
    margin: 0;
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .post-list-meta-box {
    margin-top: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }

  .post-list-cat-item {
    margin-bottom: 10px;
  }
}
</style>
